// 获取dom
const tbody = document.querySelector('tbody');
const updateform = document.querySelector('#updateModal form');
const addform = document.querySelector('#addModal form');// 获取表单
// 封装
function gettree() {
    // 获取数据
    axios.get('/student/list')
        .then((v) => {
            //    遍历拼接
            const html = v.data.data.reduce((h, w) => h + `
    <tr>
    <th scope="row">${w.id}</th>
    <td>${w.name}</td>
    <td>${w.age}</td>
    <td>${w.sex}</td>
    <td>${w.group}</td>
    <td>${w.phone}</td>
    <td>${w.salary}</td>
    <td>${w.truesalary}</td>
    <td>${w.province + w.city + w.county}</td>
    <td>
      <button type="button" class="btn btn-primary btn-sm upData-show-form" data-id=${w.id}>修改</button>
      <button type="button" class=" updelete btn btn-danger btn-sm" data-id=${w.id}>删除</button>
    </td>
  </tr>
    `, '')
            tbody.innerHTML = html
        })
}
// 获取最新数据
gettree()

// 封装初始化下拉列表
function initgetselect(select) {
    const Modal = document.querySelector(`${select} [name= province]`);// 获取省
    const Modalcity = document.querySelector(`${select} [name= city]`);// 获取市
    const Modalcounty = document.querySelector(`${select} [name= county]`);// 获取县
    // 添加省份
    // axios.get('/geo/province')
    //     .then((v) => {
    //         // 遍历拼接
    //         Modal.innerHTML = v.data.reduce(
    //             (h, w) => h + `<option value="${w}">${w}</option>`,
    //             `<option value="">--省--</option>`)
    //     })
    initgetone('/geo/province', {}, Modal, '省')

    // 给省绑定chang事件
    Modal.addEventListener("change", function () {
        initgetone('/geo/city', { params: { pname: Modal.value } }, Modalcity, '市')
        // axios.get('/geo/city', { params:{pname:Modal.value} })
        //     .then((v) => {
        //         // 拼接
        //         Modalcity.innerHTML = v.data.reduce(
        //             (h, w) => h + `<option value="${w}">${w}</option>`,
        //             `<option value="">--市--</option>`)
        //     })
    })

    Modalcity.addEventListener("change", function () {
        initgetone('/geo/county', { params: { pname: Modal.value, cname: Modalcity.value } }, Modalcounty, '县')


        //    const  params={
        //     pname:Modal.value,
        //     cname:Modalcity.value,
        //     }
        //     axios.get('/geo/county',{params})
        //         .then((v) => {
        //             // 拼接
        //             Modalcounty.innerHTML = v.data.reduce(
        //                 (h, w) => h + `<option value="${w}">${w}</option>`,
        //                 `<option value="">--市--</option>`)
        //         })
    })



}
// 封装
// URL,params,dom,lable
function initgetone(url, params, dom, lable, value = '') {
    axios.get(url, { params })
        .then((v) => {
            // 遍历拼接
            dom.innerHTML = v.data.reduce(
                (h, w) => h + `<option value="${w}">${w}</option>`,
                `<option value="">--${lable}--</option>`)
            // 设置 select标签 选中某个值
            dom.value = value
        })
}
// 添加表单
initgetselect('#addModal')
// 编辑表单
initgetselect('#updateModal')
// 事件委托修改 
tbody.addEventListener('click', function (e) {
    if (e.target.classList.contains('upData-show-form')) {
        // 弹出模态框
        $('#updateModal').modal('show')
        // 获取id
        const id = e.target.dataset.id
        // 获取数据遍历
        axios.get('/student/one', { params: { id } })
            .then((v) => {
                // 根据id获取学员信息
                const obj = v.data.data
                // 遍历
                for (const key in obj) {
                    // 获取表单信息
                    const tager = document.querySelector(`#updateModal [name=${key}]`);
                    // 判断当key等于sex时就执行后跳出
                    if (key === 'sex') {
                        // 当编辑表单name等于sex且value等于object.sex就选中
                        document.querySelector(`#updateModal [name=sex][value=${obj.sex}]`).checked = true
                        continue
                    }
                    // 有这个属性才赋值
                    if (tager) {
                        tager.value = obj[key]
                    }

                    // 根据省来获取市县
                    initgetone('/geo/city',
                        { pname: obj.province },
                        document.querySelector('#updateModal [name=city]'),
                        '市',
                        obj.city)
                    // 县区
                    initgetone('/geo/county',
                        { pname: obj.province, cname: obj.city },
                        document.querySelector('#updateModal [name=county]'),
                        '县',
                        obj.county)


                }
            })
    } else if (e.target.classList.contains('updelete')) {
        console.log(111);
        // 获取id
        const id = e.target.dataset.id
        axios.delete('/student/delete', { params: { id } })
            .then((v) => {
                if (confirm('您确认删除吗')) {
                    if (v.data.code === 0) {
                        // 删除成功提示
                        toastr.success(v.data.message);
                        // 获取最新数据
                        gettree()
                    }
                }
            })
    }
})

// 添加//绑定提交事件
addform.addEventListener('submit', function (e) {
    // 去除提交刷新事件
    e.preventDefault()
    // 获取表单数据
    const data = $(addform).serialize()
    // 添加请求
    axios.post('/student/add', data)
        .then((v) => {
            if (v.data.code === 0) {
                // 弹窗
                toastr.success(v.data.message);
                // 重置
                addform.reset()
                // 关闭模态框
                $('#addModal').modal('hide')
                // 获取最新数据
                gettree()
            }
        })
})

// 编辑//绑定提交事件
updateform.addEventListener('submit', function (e) {
    // 去除提交刷新事件
    e.preventDefault()
    // 获取表单数据
    const data = $(updateform).serialize()
    // 添加请求
    axios.put('/student/update', data)
        .then((v) => {
            if (v.data.code === 0) {
                // 弹窗
                toastr.success(v.data.message);
                // 重置
                addform.reset()
                // 关闭模态框
                $('#addModal').modal('hide')
                // 获取最新数据
                gettree()
            }
        })
})


